<template>
  <div class="w-full h-auto relative" :class="{
    'cursor-pointer': edit ?? true,
    'preview-block-active': (edit ?? true) && isActive
  }" :style="backgroundStyle" @click="handlePreviewClick">
    <section class="relative max-w-[1200px] mx-auto py-[16px] px-[32px]">
      <!-- 图片容器：根据对齐方式调整图片位置 -->
      <div :class="imageContainerClass" class="relative h-[58px]">
        <!-- 只有当有预览图片时才显示图片 -->
        <div v-if="previewTitleUrl && previewTitleUrl.trim() !== ''" class="relative inline-block">
          <img :src="previewTitleUrl" alt="title-background" style="height: 58px; width: auto; max-width: none;" />
          <!-- 标题文字：垂直居中，水平位置根据对齐方式调整 -->
          <div :style="titleTextStyle" :class="titlePositionWithImageClass">
            {{ title.titleInfo.title }}
          </div>
        </div>
        <!-- 当没有背景图片时，文字根据对齐方式定位 -->
        <div v-else :style="titleTextStyle" :class="titlePositionClass">
          {{ title.titleInfo.title }}
        </div>
      </div>
      <!-- 介绍文字：绝对定位在左下角，自动换行贴底 -->
      <div v-if="title.descInfo.desc" :style="descTextStyle" class="bottom-0 left-0 text-left flex items-end pt-[32px]">
        <div class="leading-tight">
          {{ title.descInfo.desc }}
        </div>
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { TitleState } from './title-module.vue'
import { getPreviewImageUrl } from './imagePreview'

const emit = defineEmits<{
  (e: 'click'): void;
}>()

const props = defineProps<{
  title: TitleState;
  edit?: boolean;
  isActive?: boolean;
}>()

// 背景样式 - 根据 title-module.vue 的数据结构
const backgroundStyle = computed(() => {
  if (props.title.bgType === 'color') {
    return { background: props.title.bgColor }
  } else {
    // 只有当有预览图片或原始图片URL时才设置背景图片
    const imageUrl = previewImageUrl.value || props.title.bgImageInfo.imgUrl
    if (imageUrl) {
      return {
        backgroundImage: `url(${imageUrl})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        // width: props.title.bgImageInfo.w ? props.title.bgImageInfo.w + 'px' : 'auto',
        // height: props.title.bgImageInfo.h + 'px'
      }
    }
  }
})

// 标题文字样式
const titleTextStyle = computed(() => {
  const style = props.title.titleInfo.textStyle
  return {
    fontSize: style.fontSize + 'px',
    color: style.fontColor,
    fontWeight: style.fontBold ? '600' : '400',
    fontStyle: style.italic ? 'italic' : 'normal',
    textDecoration: style.underline ? 'underline' : 'none',
    textAlign: style.alignCenter as 'left' | 'center' | 'right' | 'justify',
    width: style.textWidth ? style.textWidth + 'px' : 'auto',
    height: style.textHeight ? style.textHeight + 'px' : 'auto'
  }
})

// 图片容器对齐样式
const imageContainerClass = computed(() => {
  const alignCenter = props.title.titleInfo.textStyle.alignCenter

  switch (alignCenter) {
    case 'left':
      return 'flex justify-start'
    case 'right':
      return 'flex justify-end'
    case 'center':
    default:
      return 'flex justify-center'
  }
})

// 标题文字定位样式（仅在没有背景图片时使用）
const titlePositionClass = computed(() => {
  const alignCenter = props.title.titleInfo.textStyle.alignCenter
  const baseClasses = 'absolute top-1/2 transform -translate-y-1/2 whitespace-nowrap'

  switch (alignCenter) {
    case 'left':
      return `${baseClasses} left-0`
    case 'right':
      return `${baseClasses} right-0`
    case 'center':
    default:
      return `${baseClasses} left-1/2 -translate-x-1/2`
  }
})

// 标题文字定位样式（有背景图片时使用）
const titlePositionWithImageClass = computed(() => {
  const alignCenter = props.title.titleInfo.textStyle.alignCenter
  const baseClasses = 'absolute top-1/2 transform -translate-y-1/2 whitespace-nowrap'

  switch (alignCenter) {
    case 'left':
      // 距离图片左边缘24px
      return `${baseClasses} left-[24px]`
    case 'right':
      // 距离图片右边缘24px
      return `${baseClasses} right-[24px]`
    case 'center':
    default:
      // 水平居中
      return `${baseClasses} left-1/2 -translate-x-1/2`
  }
})

// 描述文字样式
const descTextStyle = computed(() => {
  const style = props.title.descInfo.textStyle
  return {
    fontSize: style.fontSize + 'px',
    color: style.fontColor,
    fontWeight: style.fontBold ? '600' : '400',
    fontStyle: style.italic ? 'italic' : 'normal',
    textDecoration: style.underline ? 'underline' : 'none',
    textAlign: style.alignCenter as 'left' | 'center' | 'right' | 'justify',
    width: style.textWidth ? style.textWidth + 'px' : 'auto',
    height: style.textHeight ? style.textHeight + 'px' : 'auto'
  }
})

// 图片预览相关
const previewImageUrl = ref<string>('')
const imgLoaded = ref(false)

// 图片预览相关函数（使用可复用工具函数）
async function loadImage(url: string) {
  if (!url) {
    return ''
  }

  try {
    const previewUrl = await getPreviewImageUrl(url)
    return previewUrl
  } catch (error) {
    return ''
  }
}
const previewTitleUrl = ref('')

// 预览区块点击事件处理
const handlePreviewClick = (event: Event) => {
  // 只在编辑模式下处理点击事件
  if (props.edit ?? true) {
    event.stopPropagation()
    emit('click')
  }
}

// 监听背景图片变化，自动加载预览
watch(() => props.title.bgImageInfo.imgUrl, async (newUrl) => {
  if (props.title.bgType === 'image' && newUrl) {
    previewImageUrl.value = await loadImage(newUrl)
  } else {
    // 当URL为空或背景类型不是图片时，清除预览
    previewImageUrl.value = ''
    imgLoaded.value = false
  }
}, { immediate: true })

// 监听标题背景变化，自动加载预览
watch(() => props.title.titleInfo.titleUrl, async (newUrl) => {
  if (newUrl) {
    previewTitleUrl.value = await loadImage(newUrl)
  } else {
    // 当URL为空时，清除预览
    previewTitleUrl.value = ''
  }
}, { immediate: true })

// 监听背景类型变化，确保切换到颜色填充时清除图片预览
watch(() => props.title.bgType, (newType) => {
  if (newType === 'color') {
    previewImageUrl.value = ''
    imgLoaded.value = false
  }
}, { immediate: true })
</script>

<style scoped>
/* 预览区块激活状态样式 */
.preview-block-active {
  border: 1px dashed #000000;
  transition: border 0.3s ease;
}
</style>
